<!DOCTYPE html>
<html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Report-a-Bug</title>
    <link rel="stylesheet" href="/styles/main.css">
    <style>
      .required{
        color:red;
      }
      .label .browser {
        padding-left: 20px;
        text-align: right;
      }
      .label {
        font-weight: bold;
        font-size: 110%;
      }
      .hud-label {
        font-weight: bold;
        width: 110;
      }
      .hud-info {
        max-width: 640;
        word-break: break-all;
      }
      .item-label {
        font-weight: bold;
        color: #545454
      }
    </style>
    <script type="text/javascript">
      function validate(){
        // TODO(alexto): change this to add a highlighted message off to the
        // side of the control rather than forcing the user to hit OK on an
        // alert box.
        var form = document.getElementById('f');
        var title = form.title.value;
        var repro = form.repro.value;
        var expected = form.expected.value;
        var actual = form.actual.value;
        var url = form.url.value;
        var version = form.version.value;
        var target_element = form.target_element.value;
        var provider = form.provider.value;
        var isValid = true;
        if(title.length == 0 || repro.length == 0 ||
          expected.length == 0 || actual.length == 0 ||
          url.length == 0 || target_element.length == 0 ||
          provider.length == 0 || version.length == 0){
          isValid = false;
          alert("Please fill all fields marked as required (*).");
        }
        return isValid;
      }


      /**
       * Converts a JSON string into readable HTML for displaying to the user
       * @param {string} jsonString A raw JSON string
       * @return {string} An HTML formatted string containing the JSON elements.
       */
      function displayJSON(jsonString) {
          var jsonElements = JSON.parse(jsonString);
          var htmlOutput = '';

          for (var element in jsonElements) {
              htmlOutput = htmlOutput + '<span class="item-label">' + element + ':</span> ' + jsonElements[element] + ', ';
          }

          // Trim the trailing comma before returning.
          return htmlOutput.substr(0, htmlOutput.length - 2);
      }


      /**
       * Converts Chrome's user agent string into readable browser versions
       * @param {string} userAgentString the raw user agent string from Chrome
       * @return {string} An HTML formatted string containing the browser versions.
       */
      function displayBrowserVersions(userAgentString) {
        var userAgentTerms=userAgentString.split(' ');
        var htmlOutput = ''

        for(var term in userAgentTerms) {
          // Catch and display all the "component/version" pairs
          if(userAgentTerms[term].match('/')) {
              var componentInfo = userAgentTerms[term].split('/');
              htmlOutput = htmlOutput + '<span class="item-label">' + componentInfo[0] + ':</span> ' + componentInfo[1] + ', ';
          }
        }

        // Trim the trailing comma before returning.
        return htmlOutput.substr(0, htmlOutput.length - 2);
      }
  </script>
    <script src="/scripts/analytics.js" type="text/javascript">
    </script>
  </head>
  <body>
    <div width="100%" align="right"><b>{{user.email}}</b> | <a href="{{user.signUrl}}" class="gb4">Sign out</a></div>
    <table style="margin-top: 1em;" width="100%">
      <tbody>
        <tr>
          <td width="1%">
            <a href="/"><img style="border: 0px solid ;"
                src="/images/bite_logo_google.png" alt="Go to Home"></a></td>
          <td style="width: 100%;">
            <table width="100%">
              <tbody>
                <tr>
                  <td class="page-title">Report A Bug</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <table width="100%">
      <tbody>
        <tr>
          <td align="center">
            <table style="margin-top: 1em; width: 80%;" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td align="left">
                    <div class="outer-box">
                      <div class="welcome-area">
                        <div class="welcome-msg">Use this form to log a new bug against the
                          <a href="http://code.google.com/p/chromium/">Chromium project</a>.
                        </div>
                      </div>
                      <div class="hud-info-area">
                        <table>
                          <tr>
                            <td><span class="hud-label">URL:</span></td>
                            <td><span class="hud-info">{{url}}</span></td>
                          </tr>
                          <tr>
                            <td><span class="hud-label">Chrome Version:</span></td>
                            <td><span class="hud-info"><script>document.write(displayBrowserVersions('{{version}}'))</script></span></td>
                          </tr>
                          <tr>
                            <td><span class="hud-label">Target Element:</span></td>
                            <td><span class="hud-info"><script>document.write(displayJSON('{{target_element}}'))</script></span></td>
                          </tr>
                          <tr>
                            <td><span class="hud-label">Provider:</span></td>
                            <td><span class="hud-info">{{provider}}</span></td>
                          </tr>
                          <tr>
                            <td><span class="hud-label">Project:</span></td>
                            <td><span class="hud-info">{{project}}</span></td>
                          </tr>
                        </table>
                      </div>
                      <form method="post" action="{{postback_url}}" id="f" name="f" class="block" onsubmit="return validate()">
                        <div style="width: 100%;">
                          <input name="url" value="{{url|urlencode}}" type="hidden">
                          <input name="target_element" value="{{target_element|urlencode}}" type="hidden">
                          <input name="version" value="{{version|urlencode}}" type="hidden">
                          <input name="provider" value="{{provider}}" type="hidden">
                          <input name="project" value="{{project}}" type="hidden">
                          <table  width="100%">
                            <tbody>
                              <tr>
                                <td class="label"><label>Title:</label><span class="required">*</span></td>
                                <td class="input"><input value="" name="title" style="width: 100%;" type="text"></td>
                              </tr>
                              <tr>
                                <td colspan="2">
                                  <p>Other browsers tested:</p>
                                </td>
                              </tr>
                              <tr>
                                <td class="label" width="100px">
                                  <label class="browser">safari 4:</label>
                                </td>
                                <td class="input">
                                  <input value="Ok" name="safari4" type="radio">Ok
                                  <input value="Fail" name="safari4" type="radio">Fail
                                  <input value="Not Verified" name="safari4" checked="true" type="radio">Not Verified
                                </td>
                              </tr>
                              <tr>
                                <td class="label" width="100px">
                                  <label class="browser">firefox 3.x:</label>
                                </td>
                                <td class="input">
                                  <input value="Ok" name="firefox3" type="radio">Ok
                                  <input value="Fail" name="firefox3" type="radio">Fail
                                  <input value="Not Verified" name="firefox3" checked="true" type="radio">Not Verified
                                </td>
                              </tr>
                              <tr>
                                <td class="label" width="100px">
                                  <label class="browser">ie7:</label>
                                </td>
                                <td class="input">
                                  <input value="Ok" name="ie7" type="radio">Ok
                                  <input value="Fail" name="ie7" type="radio">Fail
                                  <input value="Not Verified" name="ie7" checked="true" type="radio">Not Verified
                                </td>
                              </tr>
                              <tr>
                                <td class="label" width="100px">
                                  <label class="browser">ie8:</label>
                                </td>
                                <td class="input">
                                  <input value="Ok" name="ie8" type="radio">Ok
                                  <input value="Fail" name="ie8" type="radio">Fail
                                  <input value="Not Verified" name="ie8" checked="true" type="radio">Not Verified
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <table cellpadding="2" cellspacing="0" width="100%">
                            <tbody>
                              <tr>
                                <td class="label">
                                  <label>What steps repro the problem?:</label>
                                  <span class="required">*</span>
                                </td>
                                <td>
                                  <textarea name="repro" style="width: 100%;" rows="4">1. 
2. 
3. 
4. </textarea>
                                </td>
                              </tr>
                              <tr>
                                <td class="label">
                                  <label>What is the expected result?:</label>
                                  <span class="required">*</span>
                                </td>
                                <td>
                                  <textarea name="expected" style="width: 100%;" rows="4"></textarea>
                                </td>
                              </tr>
                              <tr>
                                <td class="label">
                                  <label>What happens instead?:</label>
                                  <span class="required">*</span>
                                </td>
                                <td>
                                  <textarea name="actual" style="width: 100%;" rows="4"></textarea>
                                </td>
                              </tr>
                              <tr>
                                <td class="label">
                                  <label>Please provide any additional information:</label>
                                </td>
                                <td>
                                  <textarea name="additionalInfo" style="width: 100%;" rows="4"></textarea>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <span class="comment">&nbsp;</span>
                                </td>
                                <td>
                                  <span class="comment">(e.g. only repros after a browser restart, observed 20% of the time, etc.)</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <table>
                            <tbody>
                              <tr>
                                <td style="text-align: right;">
                                  <input value="Submit this report" type="submit">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </form>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
    <center>&copy; 2010</center>
  </body>
</html>
